<template>
  <div class="comment-section">
    <!-- 标题：今日评论 -->
    <h1>今日评论</h1>
    <!-- 评论列表 -->
    <ul>
      <!-- 遍历 comments 数组，生成每个评论项 -->
      <li v-for="(comment, index) in displayedComments" :key="index" class="comment">
        <!-- 显示用户头像 -->
        <img :src="comment.avatar" alt="Avatar" class="avatar">
        <!-- 显示评论内容 -->
        <div class="comment-content">
          <!-- 用户名 -->
          <p class="username">{{ comment.username }}</p>
          <!-- 评论信息 -->
          <p class="message">{{ comment.message }}</p>
        </div>
      </li>
    </ul>
    <!-- 刷新按钮 -->
    <button @click="refreshComments" v-if="comments.length > displayedCount">刷新更多</button>
    <!-- 提交新评论的表单 -->
    <form @submit.prevent="addComment" class="comment-form">
      <!-- 用户名输入框 -->
      <input type="text" v-model="newComment.username" placeholder="用户名" required>
      <!-- 评论内容文本域 -->
      <textarea v-model="newComment.message" placeholder="评论内容" required></textarea>
      <!-- 提交按钮 -->
      <button type="submit">提交评论</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [], // 初始评论数据为空，稍后从本地存储加载
      newComment: {
        // 新评论的数据模型
        username: '',
        message: '',
        avatar: '../../static/touxiang/2.jpg' // 默认头像路径
      },
      displayedCount: 5 // 初始显示的评论数量
    };
  },
  computed: {
    displayedComments() {
      // 返回当前显示的评论列表
      return this.comments.slice(0, this.displayedCount);
    }
  },
  methods: {
    getUsernameFromLocalStorage() {
      const userInfo = localStorage.getItem('userInfo');
      if (userInfo) {
        const parsedUserInfo = JSON.parse(userInfo);
        return parsedUserInfo.name;
      } else {
        return '';
      }
    },
    addComment() {
      // 将新评论添加到评论列表中
      this.comments.push({ ...this.newComment });
      // 更新本地存储中的评论数据
      localStorage.setItem('comments', JSON.stringify(this.comments));
      // 清空输入框内容
      this.newComment.username = '';
      this.newComment.message = '';
    },
    refreshComments() {
      // 增加显示的评论数量
      this.displayedCount += 5;
    }
  },
  mounted() {
    // 从本地存储中加载评论数据
    const storedComments = localStorage.getItem('comments');
    if (storedComments) {
      this.comments = JSON.parse(storedComments);
    } else {
      // 如果本地存储中没有评论数据，则使用初始数据
      this.comments = [
        { username: '覃路凯', message: '第一', avatar: '../../static/touxiang/1.jpg' },
        { username: '沈琦昌', message: '说我吗？', avatar: '../../static/touxiang/2.jpg' }
      ];
      // 将初始数据保存到本地存储中
      localStorage.setItem('comments', JSON.stringify(this.comments));
    }
    // 设置新评论的用户名为本地存储中的用户名
    this.newComment.username = this.getUsernameFromLocalStorage();
  }
};
</script>


<style scoped>
.comment-section {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

.comment {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-content {
  flex: 1;
  text-align: left;
  /* 添加这一行 */
}

.username {
  font-weight: bold;
}

.message {
  margin: 5px 0;
}

.comment-form {
  display: flex;
  flex-direction: column;
}

.comment-form input,
.comment-form textarea {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.comment-form button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.comment-form button:hover {
  background-color: #0056b3;
}
</style>
